<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>温度点统计显示</title>
<link href="css/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
		var setting = {	};
		
		var zNodes =[
			{ name:"父节点1 - 展开", open:true,
				children: [
					{ name:"父节点11 - 折叠",
						children: [
							{ name:"叶子节点111"},
							{ name:"叶子节点112"},
							{ name:"叶子节点113"},
							{ name:"叶子节点114"}
						]},
					{ name:"父节点12 - 折叠",
						children: [
							{ name:"叶子节点121"},
							{ name:"叶子节点122"},
							{ name:"叶子节点123"},
							{ name:"叶子节点124"}
						]},
					{ name:"父节点13 - 没有子节点", isParent:true}
				]},
			{ name:"父节点2 - 折叠",
				children: [
					{ name:"父节点21 - 展开", open:true,
						children: [
							{ name:"叶子节点211"},
							{ name:"叶子节点212"},
							{ name:"叶子节点213"},
							{ name:"叶子节点214"}
						]},
					{ name:"父节点22 - 折叠",
						children: [
							{ name:"叶子节点221"},
							{ name:"叶子节点222"},
							{ name:"叶子节点223"},
							{ name:"叶子节点224"}
						]},
					{ name:"父节点23 - 折叠",
						children: [
							{ name:"叶子节点231"},
							{ name:"叶子节点232"},
							{ name:"叶子节点233"},
							{ name:"叶子节点234"}
						]}
				]},
			{ name:"父节点3 - 没有子节点", isParent:true}
		
		];
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		
		function showDayTable(event){//应该是弹出个新窗口来显示这个表格 而不是直接在右侧显示
			var x = event.pageX;
			var y = event.pageY;
		var insertHtml = $("#menu").append("这是用来显示一天信息的");
			insertHtml.css("position","absolute");
			insertHtml.offset({top: y,left: x});
			insertHtml.show();
			console.dir(event);
			console.log("~~~~~~~~");
			}
		
		$(function(){
			$("#queryResult td").click(showDeatil);
			});
		function showDeatil(id){
			window.open("dayTable.html","_blank","toolbar=no,status=no,top=300,left=400,height=120,width=800");
			}
			
</script>
</head>
<body>
	<div class="main">
		<table width="100%">
			<tr>
				<td width="30%" valign="top">
					<div class="tree">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</td>
				<td width="70%" valign="top">
					<div class="content">
						<div>
							查询时间: <input type="text" value="2014-06-18 07:">
						</div>
						<div>
							查询结果:
							<table id="queryResult" class="result">
								<tr>
<!-- 									<td><a href="javascript:showDeatil('101')">101<br /> <span style="color: #00CCFF;">28℃</span></a></td> -->
									<td><a href="javascript:showDeatil('101')">101<br /> <span style="color: #00CCFF;">28℃</span></a></td>
									<td>102<br /> <span style="color: #00CCFF;">29℃</span></td>
									<td>103<br /> <span style="color: #00CCFF;">26℃</span></td>
									<td>104<br /> <span style="color: #00CCFF;">19℃</span></td>
									<td>105<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>106<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>107<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>108<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>109<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>110<br /> <span style="color: #00CCFF;">22℃</span></td>
								</tr>
								<tr>
									<td>101<br /> <span style="color: #00CCFF;">28℃</span></td>
									<td>102<br /> <span style="color: #00CCFF;">29℃</span></td>
									<td>103<br /> <span style="color: #00CCFF;">26℃</span></td>
									<td>104<br /> <span style="color: #00CCFF;">19℃</span></td>
									<td>105<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>106<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>107<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>108<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>109<br /> <span style="color: #00CCFF;">22℃</span></td>
									<td>110<br /> <span style="color: #00CCFF;">22℃</span></td>
								</tr>
							</table>
						</div>
			</div>
			</td>
			</tr>
		</table>
	</div>
	<div id="menu" style="display: none;width: 200px;height: 200px;"></div>
</body>
</html>